<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <style>
  #paper {
    position: relative;
  }
  </style>
  <script src="https://s2.ssl.qhres.com/!87edaa34/animator-0.3.1.min.js"></script>
</head>
<body>
  <div id="container"></div>
  <script src="/js/spritejs.js"></script>
  <script>
  (async function(){
    const paper = spritejs.Paper2D('#container', 600, 400)
    const Sprite = spritejs.Sprite,
          Label = spritejs.Label

    let res = await paper.preload(
      ['images/tt2.png', 'images/tt2.json'],
      ['images/birds.png', 'images/birds.json'],
      'images/bird.png',
    )

    console.log(res)

    const s = new Sprite()
    
    s.attr({
      anchor: [0.5, 0.5],
      pos: [100, 100],
      size: [43, 30],
      //bgcolor: 'green',
      //border: [5, 'red'],
      // transform: {
      //   translate: [30, 30],
      //   rotate: 45,
      // },
      zIndex: 200,
    })

    s.textures = [{
      src: 'images/bird.png',
      srcRect: [2, 2, 86, 60]
    }]

    const bird = new Sprite()
    
    bird.attr({
      anchor: [0.5, 0.5],
      pos: [300, 100],
      opacity: 0.7,
      scale: 0.5,
      bgcolor: 'green',
      padding: [30,30,30,30],
      //border: [5, 'red'],
      // transform: {
      //   translate: [30, 30],
      //   rotate: 45,
      // },
      zIndex: 200,
    })

    bird.textures = ['bird1.png']

    bird.on('click', function(e){
      console.log(e)
    })

    const s2 = new Sprite({
      attributeChangedCallback(key, oldVal, newVal){
        if(key === 'pos'){
          //console.log(newVal)
        }
      }
    })

    s2.attr({
      anchor: [0.5, 0.5],
      pos: [100, 300],
      size: [50, 50],
      rotate: 45,
      bgcolor: 'blue',
      opacity: 0.5,
      zIndex: 201    
    })

    const s3 = new Sprite({
      attributeChangedCallback(key, oldVal, newVal){
        if(key === 'pos'){
          //console.log(newVal)
        }
      }
    })

    s3.attr({
      anchor: [0, 0],
      pos: [100, 300],
      size: [50, 50],
      rotate: 45,
      bgcolor: 'green',
      opacity: 0.5,
      zIndex: 201    
    })

    const s0 = new Sprite()

    s0.attr({
      pos: [0, 0],
      size: [390, 390],
    })

    s0.textures = ['ramda.png']

    paper.layer('bg').append(s0)
    paper.layer('fg').append(bird, s, s2, s3)

    let label1 = new Label('测试一下\n我能换行\n测试');

    label1.attr({
      pos: [120, 150],
      //size: [150, 150],
      padding: 10,
      zIndex: 300,
      color: 'white',
      bgcolor: 'rgba(0,0,0,0.5)',
      textAlign: 'right',
      borderRadius: 10,
    })

    paper.layer('fg').append(label1)

    var a1 = new Animator(3000,  function(p){
      var ty = -200 * p
      s2.attr('pos', [100, 300 + ty])
      //console.log(s2.attr('pos'))
    })

    // container.onclick = function(e){
    //   a1.animate();
    // }
    s0.on('click', function a(evt){
      a1.animate()
      evt.target.off(evt.type, a)
    })
    
    paper.layer('bg').on('click', function(){
      console.log(111)
    })

    // let textureIdx = 0;
    
    // setInterval(function(){
    //   const textures = s.textures

    //   textures[0].srcRect = [2 + (++textureIdx % 3) * 88, 2, 86, 60]
    //   s.textures = textures
    //   //s.forceUpdate()

    //   const src = `bird${textureIdx % 3 + 1}.png`
    //   bird.textures = [src]
    // }, 100);

    window.s2 = s2
    window.bird = bird
  })()
  </script>
</body>
</html>